<template>
  <a-table bordered :data-source="dataSource" :columns="columns">
    <template #type="{ text: type }">
      <span>
        <a-tag :color="TypeNumToTextMap[type].color">
          {{ TypeNumToTextMap[type].text }}
        </a-tag>
      </span>
    </template>
  </a-table>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { getShopList } from '../../service/api/super';
import { TypeNumToTextMap } from '../../utils/const';

let dataSource = ref([]);

const columns = [
  {
    title: '店铺 id',
    dataIndex: 'id',
  },
  {
    title: '店铺名',
    dataIndex: 'name',
  },
  {
    title: '店铺类型',
    dataIndex: 'type',
    slots: {
      customRender: 'type',
    },
  },
];

export default defineComponent({
  components: {
    PlusOutlined,
  },

  setup() {
    const randomColor = Math.floor(Math.random() * 16777215).toString(16);

    const getShopListRequest = async () => {
      const res = await getShopList();
      dataSource.value = res?.data;
    }

    onMounted(async () => {
      await getShopListRequest();
    });

    return {
      columns, dataSource, TypeNumToTextMap, randomColor
    };
  },
});
</script>

<style lang="less">
.editable-cell {
  position: relative;

  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.avatar-uploader {
  padding-left: 20px;
}
</style>